<template>
  <div>
    <el-row>
      <el-col>
        <div id="area" :style="{width: '100%', height: '600px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import 'echarts/map/js/china.js';
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let area = this.$echarts.init(document.getElementById('area'));

        //数据纯属虚构
        var data = [{
          name: '北京',
          value: 800
        },
          {
            name: '天津',
            value: 372
          },
          {
            name: '上海',
            value: 652
          },
          {
            name: '重庆',
            value: 491
          },
          {
            name: '河北',
            value: 204
          },
          {
            name: '河南',
            value: 8212
          },
          {
            name: '云南',
            value: 4523
          },
          {
            name: '辽宁',
            value: 1234
          },
          {
            name: '黑龙江',
            value: 3215
          },
          {
            name: '湖南',
            value: 2213
          },
          {
            name: '安徽',
            value: 3250
          },
          {
            name: '山东',
            value: 3512
          },
          {
            name: '新疆',
            value: 758
          },
          {
            name: '江苏',
            value: 6000
          },
          {
            name: '浙江',
            value: 5532
          },
          {
            name: '江西',
            value: 2140
          },
          {
            name: '湖北',
            value: 3280
          },
          {
            name: '广西',
            value: 779
          },
          {
            name: '甘肃',
            value: 230
          },
          {
            name: '山西',
            value: 1315
          },
          {
            name: '内蒙古',
            value: 1234
          },
          {
            name: '陕西',
            value: 523
          },
          {
            name: '吉林',
            value: 620
          },
          {
            name: '福建',
            value: 320
          },
          {
            name: '贵州',
            value: 1582
          },
          {
            name: '广东',
            value: 8351
          },
          {
            name: '青海',
            value: 12
          },
          // {
          //   name: '西藏',
          //   value: 0
          // },
          {
            name: '四川',
            value: 8752
          },
          {
            name: '宁夏',
            value: 152
          },
          {
            name: '海南',
            value: 210
          },
          {
            name: '台湾',
            value: 0
          },
          {
            name: '香港',
            value: 0
          },
          {
            name: '澳门',
            value: 0
          }
        ];

        var yData = [];

        data.sort(function(o1, o2) {
          if (isNaN(o1.value) || o1.value == null) return -1;
          if (isNaN(o2.value) || o2.value == null) return 1;
          return o1.value - o2.value;
        });

        for (var i = 0; i < data.length; i++) {
          yData.push(data[i].name);
        }

        var option = {
          title: {
            text: '',
            textStyle: {
              fontSize: 30,
              fontColor: '#fff'
            },
            x: 'center'
          },
          tooltip: {
            show: true,
            formatter: function(params) {
              return params.name + '：' + params.data['value'] + '人'
            },
          },
          visualMap: {
            type: 'continuous',
            text: ['', ''],
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            max: 10000,
            inRange: {
              color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
            },
            textStyle: {
              color: '#fff'
            },
            bottom: 30,
            left: 'left',
          },
          grid: {
            right: 20,
            top: 50,
            bottom: 30,
            width: '20%'
          },
          xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            splitNumber: 1,
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 2,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'category',
            nameGap: 16,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff'
              }
            },
            data: yData
          },
          geo: {
            roam: false,
            zoom: 0.6,
            map: 'china',
            left: 'left',
            right:'300',
            layoutSize: '80%',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                areaColor: '#fff464'
              }
            },
            regions: [{
              name: '南海诸岛',
              value: 1,
              itemStyle: {
                normal: {
                  opacity: 1,
                  label: {
                    show: true
                  }
                }
              }
            }],
          },
          series: [{
            name: 'mapSer',
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: data
          }, {
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: '#40a9ed'
              },
              emphasis: {
                color: "#3596c0"
              }
            },
            label: {
              normal: {
                show: false,
                position: 'right',
                offset: [0, 10]
              },
              emphasis: {
                show: true,
                position: 'right',
                offset: [10, 0]
              }
            },
            data: data
          }]
        };
        // 绘制图表
        area.setOption(
          option
        );
      }
    }
  }
</script>

<style scoped>

</style>
